<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yy</title>
    <style>
        img {
            width: 640px;
            height: 320px;
        }
        
        .pic-list img {
            width: 300px;
            height: 200px;
        }
        
        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 轮播图效果 -->
    <img src="images/a.jpg" alt="" class="swiper">
    <div class="btn-list">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
    </div>

    <hr>
    <!-- 使用jQuery制作水果列表添加与删除效果 -->
    <input type="text">
    <button id="btn">添加</button>
    <ul class="fruit-list">
        <li>香蕉</li>
        <li>苹果</li>
        <li>鸭梨</li>
    </ul>

    <hr>
    <!-- 使用jQuery制作随鼠标显示大图效果 -->
    <div class="pic-list">
        <img src="./images/a.jpg" alt="">
        <img src="./images/b.jpg" alt="">
        <img src="./images/c.jpg" alt="">
    </div>

    <script src="./script/jquery.js"></script>
    <script>
        // 使用jQuery制作：1. 轮播图效果；
        let imgSrc = [
            "./images/a.jpg",
            "./images/b.jpg",
            "./images/c.jpg"
        ]
        $("button").click(function() {
            // 获取索引
            let index = $(this).index();
            // 设置属性
            $(".swiper").attr("src", imgSrc[index]);
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
        });


        // 2. 使用jQuery制作水果列表添加与删除效果；
        $("#btn").click(function() {
                let value = $("input").val();
                let li = $(`<li>${value}</li>`);
                $(".fruit-list").append(li);
            })
            //事件委托：将子集的时间委托给父级处理
        $(".fruit-list").on("click", "li", function() {
            $(this).remove();
        })


        // 3. 使用jQuery制作随鼠标显示大图效果。
        $(".pic-list img").mouseenter(function() { //为img标签添加移入事件
            var appendpic = $("<img class='a'>"); //创建一个新的img标签
            var url = $(this).attr("src"); //获取原图路径
            appendpic.attr("src", url); //将新图路径设置与原图路径相同
            $("body").append(appendpic); //将新图插到body标签中
        }).mousemove(function(e) {
            var x = e.pageX; //获取鼠标x坐标
            var y = e.pageY; //获取鼠标y坐标
            //将新图的位置设置成与鼠标相同
            $(".a").css("position", "fixed").css("left", x + 10).css("top", y + 10);
        }).mouseleave(function() {
            $(".a").remove(); //当鼠标移出时 删除新图
        });
    </script>
</body>

</html>